<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="/favicon.ico">
	<link rel="Shortcut Icon" href="/favicon.ico" />
	<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
	<link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css" />
	<link rel="stylesheet" href="./../lib/layui/css/layui.css">
	<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
	<title>投诉列表</title>
</head>

<body>
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 投诉管理 <span class="c-gray en">&gt;</span>
		投诉列表<a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);"
		 title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a></nav>
	<div class="page-container">
		<div class="text-c">
			<select name="" class="input-text" id="usrecompStatus" style="width:15%;">
				<option value="">-请选择-</option>
				<option value="0">咨询</option>
				<option value="1">建议/意见</option>
				<option value="2">投诉/举报</option>
				<option value="3">账号被盗</option>
				<option value="4">其他</option>
			</select>
			<button type="submit" class="btn btn-success" id="username_btn" name="" data-type="reload"><i class="Hui-iconfont">&#xe665;</i>搜索</button>
		</div>
		<div class="cl pd-5 bg-1 bk-gray mt-20" style="border:0;background:none"> <span class="l"></span> </div>
		<table class="layui-hide" id="list" lay-filter="list"></table>
	</div>
	<div id="pager" class="clearfix"></div>
	<div id="usercomplDetail" class="hide" style="margin:25px;">
		<div>
			投诉人：<lable id="userRealName"></lable>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
			投诉方账号：<lable id="userName"></lable>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
			类型：<lable id="type"></lable>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
			时间：<lable id="dateTime"></lable>
		</div>
		<hr style="width: 50%;" />
		<span style="color: #BBBBBB;">截图：</span>
		<div>
			<img id="usercomplImg" style="height:auto; width: 50%;" />
		</div>
		<span style="color: #BBBBBB;">内容：</span>
		<div id="usercomplContent" style="width: 50%;" />
	</div>
	<span style="color: #BBBBBB;">回复内容：</span>
	<div id="userReplyContent" style="width: 50%;" />
	</div>
	</div>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="./../static/js/common.js"></script>
	<script type="text/javascript" src="../lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="../static/h-ui/js/H-ui.min.js"></script>
	<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script>
	<!--/_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="./../lib/layui/layui.js"></script>
	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/html" id="operation">
		<a  title="阅读" lay-event="read" class=""><i class="Hui-iconfont">&#xe720;</i></a>
		<!-- <a  title="处理" lay-event="handle" class=""><i class="Hui-iconfont">&#xe615;</i></a> -->
		<a  title="回复" lay-event="reply" class=""><i class="Hui-iconfont">&#xe6c5;</i></a>
</script>
	<script type="text/javascript">
		layui.use('table', function () {
			var table = layui.table
				, form = layui.form;
			table.render({
				elem: '#list',
				cellMinWidth: 80,
				url: admin_url + '/scaComplaint/complaintList',
				// id为重置表格，进行搜索
				id: 'reload',
				request: {
					pageName: 'page',
					limitName: 'size'
				},
				// 传输模式
				// contentType: 'application/json',
				paresData: function (res) {
					return {
						'data': res.data
					}
				},
				response: {
					statusCode: 200
				},
				// 传入数据
				where: {
					tokenUserId: id2,
					token: token
				},
				// 回调
				done: function (res, curr, count) {
					console.log(res)
				},
				method: 'post',
				cols: [[
					{ checkbox: true, align: 'center' },
					{ field: 'id', title: '编号', align: 'center',width:80 },
					{ field: 'createTime', title: '投诉时间', align: 'center' },
					{ field: 'username', title: '姓名', align: 'center' },
					{ field: 'username', title: '账号', align: 'center' },
					{ field: 'content', title: '内容', align: 'center' },
					{ field: 'type', title: '类型', align: 'center',templet:function(e){
						if (e.type == 0) {
							return '<span class="layui-badge layui-bg-orange">咨询</span>'
						} else if (e.type == 1) {
							return '<span class="layui-badge layui-bg-cyan">建议/意见</span>'
						}else if (e.type == 2){
							return '<span class="layui-badge">投诉/举报</span>'
						} else if(e.type == 3){
							return '<span class="layui-badge">账号被盗</span>'
						}
						else {
							return '<span class="layui-badge layui-bg-gray">其他</span>'
						}
					} },
					{ field: 'status', title: '状态', align: 'center',templet:function(e){
						if (e.status == 0) {
							return '<span class="layui-badge">未阅读</span>'
						} else if (e.status == 1) {
							return '<span class="layui-badge layui-bg-blue">已阅读</span>'
						} else {
							return '<span class="layui-badge layui-bg-green">已回复</span>'
						}
					} },
					{ toolbar: '#operation', title: '操作' }
				]],
				page: true
			})
			// 搜索功能 需要在标签上加载data-type = reload
			var $ = layui.$, active = {
				reload: function () {
					// 获取传入的值
					var type = $("#usrecompStatus option:selected").val();
						table.reload('reload', {
							page: {
								curr: 1 //重第一页开始
							},
							// 传入的值.
							where: {
								type: type
							}
						})
					

				}
			}
			$("#username_btn").on("click", function () {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			})
			table.on('tool(list)', function (obj) {
				var data = obj.data;
				var id = data.id
				// console.log(id)
				if (obj.event === 'read') {
					$.ajax({
						type: "post",
						xhrFields: { withCredentials: true },
						url: admin_url + '/scaComplaint/read',
						data: { token: token, tokenUserId: id2, id: id },
						success: function (data) {
							var status = ''
							var item = data.data;
							console.log(item)
							if (item.type == 0) {
								status = '资讯'
							} else if (item.type == 1) {
								status = '建议/意见'
							} else if (item.type == 2) {
								status = '投诉/举报'
							} else {
								status = '账号被盗'
							}
							$("#userRealName").text()
							$("#userName").text()
							$("#type").text(status)
							$("#dateTime").text()
							$("#usercomplImg").attr('src', item.screenshotsUrl)
							$("#usercomplContent").text(item.content)
							if (item.replyContent == null) {
								$("#userReplyContent").text("")
							} else {
								$("#userReplyContent").text(item.replyContent)
							}
							
							var index = layer.open({
								type: 1,
								title: '投诉详情',
								area: ['100%', '100%'],
								content: $("#usercomplDetail")
							})
						}
					})
				} else if (obj.event === 'handle') {
					layer.confirm('确认投诉已经处理？', function () {

					})
				} else if (obj.event === 'reply') {
					var content = "";
					layer.prompt({
						formType: 2,
						value: content,
						title: '回复信息'
					}, function (value) {
						$.ajax({
							type: "post",
							xhrFields: { withCredentials: true },
							url: admin_url + '/scaComplaint/reply',
							data: { token: token, tokenUserId: id2, id: id, replyContent: value },
							success: function (data) {
								console.log(data)
								if (data.code == 200) {
									layer.msg('回复成功', {
										time: 1000,
										end: function () {
											location.replace(location.href)
										}
									})
								} else {
									layer.msg(data.msg, {
										time: 1500
									})
								}
							}
						})
						// 内容回调
					})
				}
			})
		})
	</script>
</body>

</html>